<template>
	<view>
		<nav-bar></nav-bar>
		<view class="body-content">
			<!-- 头部 -->
			<view class="content-header">
				<u-search height="60" :showAction="true" actionText="搜索" :animation="true"
					placeholder="请输入关键词"></u-search>
			</view>
			<!-- 主要内容 -->
			<view class="content-detail">
				<!-- 店铺信息 -->
				<view class="shop-content">
					<!-- 左侧 -->
					<view class="left-area">
						<view class="area-shop-name">
							<u-icon class="fixation-height" name="star"></u-icon>
							<p>{{shopData.name}}</p>
							<u-icon class="fixation-height" name="arrow-right"></u-icon>
						</view>
						<view class="area-location">
							<u-icon name="map"></u-icon>
							<text>距离您{{shopData.distance}}m</text>
						</view>
					</view>
					<!-- 右侧 -->
					<view class="right-area">
						<view @click="activeType = 1"
							:class="activeType == 1?'radio-item-active':'radio-item-no-active'">外卖
						</view>
						<view @click="activeType = 2"
							:class="activeType == 2?'radio-item-active':'radio-item-no-active'">自取
						</view>
					</view>
				</view>
				<!-- tip栏 -->
				<view class="tip-content">
					<uni-icons color="#0f559f" type="flag" size="14"></uni-icons>
					<text>欢迎光临~很高兴您的到来！</text>
				</view>
				<!-- 商品列表区域 -->
				<view class="product-content">
					<!-- 左侧类别列表 -->
					<view class="type-list">
						<view v-for="(item, index) in typeList" :key="index"
							@click="typeChangeHanlder(item.code, index)"
							:class="activeTypeIndex == index?'type-small-title-active':'type-small-title'"
							class="type-small-title">{{item.type}}</view>
					</view>
					<!-- 右侧商品列表 -->
					<view class="product-list">
						<scroll-view :scroll-y="true" style="height: 100%;" :scroll-with-animation="true"
							:scroll-into-view="activeTypeId" bindscroll="onScroll">
							<view v-for=" (product, index) in productList" :key="index">
								<!-- @scroll.passive="oonScrollevent, index)"> -->
								<p :id="product.code" class="title-type">{{product.type}}</p>
								<view @click="addShoppingCart(shop, i)" v-for="(shop, i) in product.shop" :key="i"
									class="product-item">
									<img :src="shop.cover" alt="" />
									<view class="item-detail">
										<view class="title-area">
											<p>{{shop.title}}</p>
											<p>{{shop.intro}}</p>
										</view>
										<view class="price-area">
											<text>￥{{shop.price}}<text>起</text></text>
											<u-icon @click="addBuy(shop)" name="plus-circle-fill" color="#2979ff"
												size="28"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

					<!-- 购物车 -->
					<view v-if="shoppingCart.length" class="shopping-cart">
						<view class="left-area">
							<u-icon style="position: relative;padding-right: 50rpx;" name="bag" color="white"
								size="80"></u-icon>
							<u-badge style="position: absolute;top: 20rpx;left: 120rpx;" type="error" max="99"
								:value="shoppingCart.length"></u-badge>
							<text>￥{{shoppingCartSumPrice}}</text>
						</view>
						<view class="right-area">去结算</view>
					</view>
				</view>
			</view>
			<u-overlay :show="productDetailShowVisable">
				<!-- 商品详情页 -->
				<view v-if="productDetailShowVisable" class="dialog-content">
					<u-icon class="close-btn" name="close" color="white" @click="productDetailShowVisable = false"
						size="40"></u-icon>
					<view class="dialog-body">
						<image :src="showDetailData.cover"></image>
						<!-- 标题 -->
						<view class="title-data">{{showDetailData.title}}</view>
						<!-- 介绍 -->
						<view class="intro-data">{{showDetailData.intro}}</view>
						<u-divider></u-divider>
						<!-- 配置项 -->
						<view class="configuration-item">
							<view style="margin-bottom: 30rpx;" v-for="(item, index) in configurationItem" :key="index">
								<p>{{item.title}}</p>
								<view class="item-parameter">
									<view class="item-one" v-for="(it, i) in item.parameter" :key="i"
										@click="buyClickHandler(item, it, i)">
										<u-button class="one-btn" size="small" :text="it.name"
											:style="{backgroundColor: it.checked?'#00aaff':'#e7e7e7', color: it.checked?'white':'#707070'}"></u-button>
									</view>
								</view>

							</view>
						</view>
						<view class="buy-area">
							<view style="display: flex;align-items: center;">
								<p style="font-weight: bolder;font-size: 36rpx;">￥{{showDetailData.price * buyNumber}}
								</p>
								<u-number-box v-model="buyNumber" :min="1" integer :max="100"
									style="margin-left: auto;"></u-number-box>
							</view>
							<view
								style="display: flex;align-items: center;margin-top: 20rpx;justify-content: flex-start;">
								<u-button @click="shoppingCart.push(showDetailData);productDetailShowVisable = false"
									style="width: 250rpx;" type="primary" plain shape="circle" color="#0f559f"
									text="加入购物车"></u-button>
								<u-button style="width: 250rpx;" type="primary" shape="circle" color="#0f559f"
									text="立即购买"></u-button>
							</view>
						</view>
					</view>
				</view>
			</u-overlay>

		</view>
	</view>
</template>

<script>
	import navBar from '../../components/nav-bar/nav-bar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				buyNumber: 1,
				checkedArr: [], // 选中的配置
				configurationItem: [{
					title: '杯型', // 标题
					parameter: [{
						name: '大杯'
					}, {
						name: '小杯'
					}], // 参数
				}, {
					title: '温度', // 标题
					parameter: [{
						name: '标准冰'
					}, {
						name: '少冰'
					}, {
						name: '去冰'
					}, {
						name: '热'
					}], // 参数
				}, {
					title: '糖度', // 标题
					parameter: [{
						name: '标准糖'
					}, {
						name: '少糖'
					}, {
						name: '半糖'
					}, {
						name: '微糖'
					}, {
						name: '不另外加糖'
					}], // 参数
				}, ], // 配置项
				showDetailData: {}, // 展示详情的商品
				productDetailShowVisable: false,
				shoppingCart: [], // 购物车
				activeTypeId: '',
				containerH: '',
				heightArr: [],
				productList: [{
						code: 'first',
						type: '甄选套餐',
						shop: [{

							cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
							title: '香飘飘珍珠奶茶',
							intro: '你把自己喝着凉了，心疼的是我的奶茶',
							price: '14',
						}, {
							cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
							title: '香飘飘珍珠奶茶',
							intro: '你把自己喝着凉了，心疼的是我的奶茶',
							price: '20',
						}, ]
					},
					{
						code: 'second',
						type: '新品尝新',
						shop: [{
							cover: 'https://ts1.cn.mm.bing.net/th/id/R-C.349f3d39961d12f4a260e16fcdd77a1d?rik=M%2baB2aVBGYQi2g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn11%2f0%2fw640h960%2f20180718%2fdd6e-hfnsvyz9001350.jpg&ehk=T3eW1tOnXfMDeVg2zf4nTre6SBwIgOVBj66Ik0Lghe8%3d&risl=&pid=ImgRaw&r=0',
							title: '港式杨枝甘露',
							intro: '你把自己喝着凉了，心疼的是我的奶茶',
							price: '19',
						}, ]
					},
					{
						code: 'third',
						type: '原叶鲜奶茶',
						shop: [{
							cover: 'https://ts1.cn.mm.bing.net/th/id/R-C.349f3d39961d12f4a260e16fcdd77a1d?rik=M%2baB2aVBGYQi2g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn11%2f0%2fw640h960%2f20180718%2fdd6e-hfnsvyz9001350.jpg&ehk=T3eW1tOnXfMDeVg2zf4nTre6SBwIgOVBj66Ik0Lghe8%3d&risl=&pid=ImgRaw&r=0',
							title: '港式原叶鲜奶茶',
							intro: '你把自己喝着凉了，心疼的是我的奶茶',
							price: '19',
						}, {
							cover: 'https://ts1.cn.mm.bing.net/th/id/R-C.349f3d39961d12f4a260e16fcdd77a1d?rik=M%2baB2aVBGYQi2g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn11%2f0%2fw640h960%2f20180718%2fdd6e-hfnsvyz9001350.jpg&ehk=T3eW1tOnXfMDeVg2zf4nTre6SBwIgOVBj66Ik0Lghe8%3d&risl=&pid=ImgRaw&r=0',
							title: '原叶鲜奶茶甘露',
							intro: '你把自己喝着凉了，心疼的是我的奶茶',
							price: '19',
						}, ]
					},
					{
						code: 'fourth',
						type: '真鲜果茶',
						shop: [{
							cover: 'https://ts1.cn.mm.bing.net/th/id/R-C.349f3d39961d12f4a260e16fcdd77a1d?rik=M%2baB2aVBGYQi2g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn11%2f0%2fw640h960%2f20180718%2fdd6e-hfnsvyz9001350.jpg&ehk=T3eW1tOnXfMDeVg2zf4nTre6SBwIgOVBj66Ik0Lghe8%3d&risl=&pid=ImgRaw&r=0',
							title: '港式真鲜果茶',
							intro: '你把自己喝着凉了，心疼的是我的奶茶',
							price: '19',
						}, ]
					},
				], // 商品列表
				activeTypeIndex: 0, // 类别默认激活下标
				typeList: [{
					icon: '',
					type: '甄选套餐',
					code: 'first',
				}, {
					icon: '',
					type: '新品尝新',
					code: 'second',
				}, {
					icon: '',
					type: '原叶鲜奶茶',
					code: 'third',
				}, {
					icon: '',
					type: '真鲜果茶',
					code: 'fourth'
				}, ], // 商品类别列表
				activeType: 1, // 激活的购买方式
				shopData: {
					name: '番禺沙溪店',
					distance: 154,
				}
			};
		},
		created() {
			// 手动添加选中状态
			this.configurationItem.forEach(item => {
				item.parameter.forEach(it => {
					this.$set(it, 'checked', false)
				})
			})
		},
		mounted() {
			let query = wx.createSelectorQuery().in(this)
			let heightArr = []
			let s = 0
			query.selectAll('.product-item').boundingClientRect(react => {
				react.forEach(res => {
					s += res.height
					heightArr.push(s)
				})
				this.heightArr = heightArr
			})
			query.select('.product-list').boundingClientRect(res => {
				this.containerH = res.height
			}).exec()
			console.log('高=', this.containerH);
		},
		methods: {
			// 点击选中配置项
			buyClickHandler(item, it, index) {
				item.parameter.forEach(demo => {
					this.$set(demo, 'checked', false)
				})
				this.$set(it, 'checked', true)
				this.checkedArr.forEach((d, i) => {
					if (d.title === item.title) {
						this.checkedArr.splice(i, 1)
					}
				})
				let arr = it
				arr.title = item.title
				this.checkedArr.push(arr)
			},
			// 弹出层-收起
			close() {
				this.productDetailShowVisable = false
			},
			// 打开商品详情页
			addShoppingCart(product) {
				this.showDetailData = product
				this.productDetailShowVisable = true
				// this.shoppingCart.push(product)
			},
			// 滚动事件
			onScroll(e) {
				console.log('滚动==', e);
				let scrollTop = e.detail.scrollTop
				let scrollArr = this.heightArr
				if (scrollTop >= scrollArr[scrollArr.length - 1] - this.containerH) {
					return
				} else {
					for (var i = 0; i < scrollArr.length; i++) {
						if (scrollTop >= 0 && scrollTop < scrollArr[0]) {
							this.activeTypeIndex = 0 + ''
						} else if (scrollTop >= scrollArr[i - 1] && scrollTop < scrollArr[i]) {
							this.activeTypeIndex = i + ''
						}
					}
				}

			},
			// 点击-类别事件
			typeChangeHanlder(code, index) {
				const element = document.getElementById(code);
				element.scrollIntoView({
					behavior: 'smooth',
					alignToTop: true
				});
				this.activeTypeIndex = index
			},
		},
		computed: {
			// 购物车总额
			shoppingCartSumPrice() {
				let result = 0
				this.shoppingCart.forEach(item => {
					result += Number(item.price)
				})

				return result
			},
		},
	}
</script>

<style lang="scss" scoped>
	.body-content {
		padding: 20rpx 0 120rpx 0;

		.content-header {
			padding: 0 20rpx;
		}

		.content-detail {
			.shop-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 20rpx;

				.left-area {
					.area-shop-name {
						display: flex;
						align-items: center;

						p {
							font-weight: bold;
							font-size: 34rpx;
							margin-left: 10rpx;
							height: 46rpx;
						}

						.fixation-height {
							height: 46rpx;
						}
					}

					.area-location {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						color: #b4b4b4;
						font-size: 24rpx;
					}
				}

				.right-area {
					display: flex;
					align-items: center;
					background-color: #f5f5f5;
					width: 180rpx;
					height: 60rpx;
					border-radius: 40rpx;

					.radio-item-active {
						font-size: 26rpx;
						width: 90rpx;
						color: white;
						height: 60rpx;
						background-color: #0f559f;
						border-radius: 40rpx;
						text-align: center;
						line-height: 60rpx;
					}

					.radio-item-no-active {
						font-size: 26rpx;
						width: 90rpx;
						color: #999999;
						height: 60rpx;
						background-color: #f5f5f5;
						border-radius: 40rpx;
						text-align: center;
						line-height: 60rpx;
					}
				}
			}

			.tip-content {
				margin: 0 20rpx;
				padding-left: 10rpx;
				color: #707070;
				background-color: #f5f5f5;
				border-radius: 40rpx;
				font-size: 24rpx;
				height: 38rpx;
				line-height: 38rpx;

				text {
					margin-left: 8rpx;
				}
			}

			.product-content {
				padding: 40rpx 0;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.type-list {
					width: 25%;
					background-color: #f5f5f5;

					.type-small-title {
						font-size: 24rpx;
						width: 160rpx;
						min-height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background-color: #f5f5f5;
						padding: 10rpx;
					}

					.type-small-title-active {
						background-color: #0f559f;
						color: white;
					}
				}

				.product-list {
					width: 100%;
					padding-left: 10rpx;
					height: 400px;
					// overflow-y: scroll;

					.title-type {
						font-weight: bold;
						margin-bottom: 10rpx;
						font-size: 24rpx;
						color: #626262;
					}

					.product-item {
						display: flex;
						align-items: flex-start;
						margin-bottom: 40rpx;

						img {
							width: 160rpx;
							height: 160rpx;
						}

						.item-detail {
							display: block;
							height: 160rpx;
							flex-grow: 1;

							.title-area {
								margin-left: 10rpx;

								p:nth-child(1) {
									font-weight: bold;
									font-size: 30rpx;
									color: black;
								}

								p:nth-child(2) {
									font-size: 24rpx;
									color: #999999;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									width: 400rpx;
								}
							}

							.price-area {
								padding-right: 30rpx;
								margin-top: auto;
								line-height: 120rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								text:nth-child(1) {
									font-size: 30rpx;
									font-weight: bold;
									color: black;
								}

								text text {
									font-size: 24rpx !important;
									color: #999999 !important;
									margin-left: 10rpx;
								}
							}
						}
					}
				}

				.shopping-cart {
					position: fixed;
					width: 84%;
					height: 120rpx;
					background-color: white;
					box-shadow: 0 0 10rpx 0 silver;
					bottom: 130rpx;
					left: 50%;
					transform: translateX(-50%);
					border-radius: 120rpx;
					margin: 0 20rpx;
					display: flex;
					align-items: center;

					.left-area {
						height: 100%;
						flex-grow: 2.5;
						background-color: #323232;
						color: white;
						border-top-left-radius: 120rpx;
						border-bottom-left-radius: 120rpx;
						display: flex;
						align-items: center;
						padding-left: 50rpx;

						text {
							font-weight: bold;
							font-size: 36rpx;
						}
					}

					.right-area {
						height: 100%;
						flex-grow: 1;
						border-top-right-radius: 120rpx;
						border-bottom-right-radius: 120rpx;
						background-color: #db3020;
						display: flex;
						align-items: center;
						justify-content: center;
						color: white;
					}
				}
			}

		}

		.dialog-content {
			position: relative;
			// position: fixed;
			width: 100%;
			height: 1000rpx;
			background-color: white;
			z-index: 1001;
			overflow-y: auto;
			margin-top: auto;


			.close-btn {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1002;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				background-color: rgba(186, 186, 186, .6);
				border-radius: 60rpx;
				text-align: center;
				line-height: 60rpx;
				margin: 10rpx 20rpx 0 0;
			}

			.dialog-body {
				height: 950rpx;
				overflow-x: hidden !important;
				padding-bottom: 50rpx;

				.intro-data {
					font-size: 28rpx;
					color: #707070;
					margin: 0 20rpx;
				}

				.title-data {
					font-size: 38rpx;
					font-weight: bolder;
					margin: 30rpx 20rpx;
				}

				image {
					width: 100%;
					height: 600rpx;
					object-fit: contain;
				}

				.configuration-item {
					padding: 0 20rpx;
					padding-bottom: 150rpx;
					font-size: 24rpx;

					.item-parameter {
						display: grid;
						align-items: center;
						grid-template-columns: repeat(4, 1fr);
						grid-gap: 20rpx;
						padding-top: 20rpx;

						.item-one {
							margin-right: 20rpx;

							.one-btn {
								background-color: #e7e7e7;
							}
						}
					}
				}

				.buy-area {
					position: fixed;
					width: 95%;
					height: auto;
					background-color: white;
					z-index: 10;
					bottom: 0;
					box-shadow: 0 -5px 10px rgb(202, 202, 202);
					padding: 20rpx;
					overflow-x: hidden;

					/deep/.u-number-box__plus,
					/deep/.u-number-box__minus {
						height: 42rpx !important;
					}
				}
			}
		}


	}
</style>